<template>
	<view v-if="show" class="open" :style="{ background: styles.colorBg, backgroundRgba: styles.percent / 100 }">
		<swiper
		    v-if="styles.status==1?true:false"
			:class="[styles.type == 2 ? 'swiper' : 'swiperTwo']"
			class="swiper"
			:indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
		>
			<swiper-item v-for="(v, i) in styles.imgUrl" :key="i">
				<image style="width: 100%;height: 100vh;" :src="v.img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="tubiao" v-if="styles.type == 2"><image src="../../../static/tubiao/guanbi1.png" mode="" @tap="add"></image></view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
	name: 'open',
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			show:true
		};
	},

	methods: {
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		},
		add(){
			
			this.show = false
		}
	},
	onLoad(options) {
		this.getSystem();

		this.getLayout();
	},
	props: ['styles'],
	mounted() {
		
	}
};
</script>
<style lang="scss" scoped>
.open {
	height: 100vh;
	    position: fixed;
	    z-index: 9999;
	    /* top: 0; */
	    left: 0;
	    right: 0;
	    bottom: 0;
	.swiper {
		width: 90%;
		height: 80vh;
		margin: 0upx auto;
		padding-top: 100upx;
		
		image {
			border-radius: 50upx;
		}
	}
	.swiperTwo {
		width: 100%;
		height: 100vh;

		image {
			border-radius: 50upx;
		}
	}
	.tubiao {
		image {
			width: 80upx;
			height: 80upx;
			margin: 30upx auto;
			display: flex;
		}
	}
}
</style>
